<template>
    <div>
        <el-row class="section">
            <el-col class="offset">
                <div class="info">
                    <div class="line"></div>
                    <div class="text">基本信息</div>
                </div>
                <div class="offset3">
                    <el-button type="text" @click="goOut">&lt;返回</el-button>
                </div>
            </el-col>
            <el-col>
                <el-descriptions class="offset" style="margin-top: 20px; margin-bottom: 20px;">
                    <el-descriptions-item label="入库单据号">{{orderParam.inboundDonumber}}</el-descriptions-item>
                    <el-descriptions-item label="入库方式">{{orderParam.inboundMethodName}}</el-descriptions-item>
                    <el-descriptions-item label="采购人">{{orderParam.purchaser}}</el-descriptions-item>
                    <el-descriptions-item label="采购价">{{orderParam.purchasePrice}}</el-descriptions-item>
                    <el-descriptions-item label="生产厂商">{{orderParam.manufacturerName}}</el-descriptions-item>
                    <el-descriptions-item label="登记人">{{orderParam.registrants}}</el-descriptions-item>
                    <el-descriptions-item label="登记时间">{{orderParam.registTime}}</el-descriptions-item>
                    <el-descriptions-item label="审核人">{{orderParam.reviewers}}</el-descriptions-item>
                    <el-descriptions-item label="审核时间">{{orderParam.reviewersTime}}</el-descriptions-item>
                    <el-descriptions-item label="审核备注">{{orderParam.remark}}</el-descriptions-item>
                </el-descriptions> 
            </el-col>
            <el-col class="offset">
                <div class="info">
                    <div class="line"></div>
                    <div class="text">物资入库详情</div>
                </div>
            </el-col>
            <el-col class="offset">
                <el-table :data="tableData" style="width: 90%" height="250">
                    <el-table-column prop="id" label="序号" width="70">
                    </el-table-column>
                    <el-table-column prop="itemCode" label="物资编码" width="110">
                    </el-table-column>
                    <el-table-column prop="itemName" label="物资名称" width="150">
                    </el-table-column>
                    <el-table-column prop="manufacturerName" label="生产厂商" width="190">
                    </el-table-column>
                    <el-table-column prop="store" label="数量">
                    </el-table-column>
                    <el-table-column prop="packingUnits" label="单位">
                    </el-table-column>
                    <el-table-column prop="purchasePrice" label="采购价">
                    </el-table-column>
                    <el-table-column prop="retailPrice" label="零售价">
                    </el-table-column>
                    <el-table-column fixed="right" prop="purchasePriceTotal" label="采购总价">
                    </el-table-column>
                    <el-table-column fixed="right" prop="retailPriceTotal" label="零售总价">
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    data(){
        return{
            id:'',
            tableData:[],
            orderParam:[]
        }
    },
    methods:{
        goOut(){
            this.$router.push({ path: '/materialStorage' })
        },
          //根据id查询物资入库表
        queryMaterialStorageById() {
            this.$axios.get('api/materialStorage/queryMaterialStorageById/' + this.id)
                .then(res => {
                    if (res.data.code == 200) {
                        this.orderParam = res.data.data
                        this.inboundDonumber = this.orderParam.inboundDonumber
                        this.queryMaterialStorageItem()
                    }
                })
        },
         //根据入库单据号
         queryMaterialStorageItem() {
            this.$axios.get('api/materialStorage/queryMaterialStorageItem/' + this.inboundDonumber)
                .then(res => {
                    if (res.data.code == 200) {
                        this.tableData = res.data.data
                    }
                })
        },
    },
    created(){
        this.id = this.$route.query.id
        this.queryMaterialStorageById();
    }
}
</script>

<style scoped>
.section {
    width: 1100px;
    height: 800px;
    background-color: white;
    margin-left: 100px;
    margin-top: 20px;
}

.offset {
    margin-top: 25px;
    margin-left: 50px;
}

.offset1 {
    margin-left: 1px;
}

.offset2 {
    margin-left: 800px;
}
.offset3 {
    margin-left: 900px;
}

.info {
    display: flex;
    align-items: center;
}

.line {
    width: 3px;
    /* 改变线的宽度 */
    height: 20px;
    /* 改变线的高度 */
    background-color: rgb(0, 174, 255);
    /* 改变线的颜色 */
    margin-right: 8px;
}

.text {
    color: rgb(0, 174, 255);
}
</style>